<template>
  <div class="market">
    <div class="common-tab-box">
      <div :class="{ active: tab === 1 }" @click="tab = 1">期末实有户数</div>
      <div :class="{ active: tab === 2 }" @click="tab = 2">新登记户数</div>
      <div :class="{ active: tab === 3 }" @click="tab = 3">注销吊销</div>
    </div>
    <div class="top-row">
      <div class="name">{{ topInfor.scztlx }}</div>
      <div class="value-wrapper">
        <span>{{ topInfor.hs }}</span>
        <span>{{ topInfor.dw }}</span>
      </div>
      <div class="rate" :class="{ ratedown: topInfor.tb < 0 }">
        {{ topInfor.tb }}%
      </div>
    </div>
    <div class="prechart">
      <div class="leftanimationicon"></div>
      <div class="leftmiddleicon"></div>
      <div class="leftchartarea" ref="myChart"></div>
      <div class="rightlegend">
        <div
          class="legendlitem"
          v-for="(item, index) in chartData"
          :key="index"
        >
          <div class="legendname">
            <div
              class="lefticon"
              :style="'background:' + colorList[index] + ';'"
            ></div>
            <div class="legendnametext">{{ item.ztlb }}</div>
          </div>
          <div class="legendpercent">
            <span
              ><b>{{ item.hs }}</b
              >&nbsp;户</span
            >
            <span class="percent" :class="{ downpercent: item.zs < 0 }"
              ><i></i>{{ Math.abs(item.zs) }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      tab: 1,
      myChart: null,
      topInfor: {},
      chartData: [],
      colorList: [
        '#9CFBC5',
        '#F5BA5E',
        '#90D7F5',
        '#1983FF',
        '#8BCE1D',
        '#D170FF',
        '#F46D4F',
        '#FA9A09',
        '#FF317B',
        '#444444',
        '#BDBDBD',
        '#D01505',
        '#D5D5D5',
        '#D70303'
      ]
    }
  },
  watch: {
    tab() {
      this.getData()
      this.getChartData()
    }
  },
  mounted() {
    this.getData()
    this.getChartData()
  },
  methods: {
    getData() {
      getAction('/topic/data/listAllBySql/dy_app_xxzb_sczt', {
        opt:
          this.tab === 1
            ? '期末实有户数'
            : this.tab === 2
              ? '新登记户数'
              : this.tab === 3
                ? '注销吊销'
                : ''
      }).then((res) => {
        if (res.result && res.result.length > 0) {
          this.topInfor = res.result[0]
        }
      })
    },
    getChartData() {
      getAction('/topic/data/listAllBySql/dy_ydd_xxzb_sczt_flx', {
        opt:
          this.tab === 1
            ? '期末实有户数'
            : this.tab === 2
              ? '新登记户数'
              : this.tab === 3
                ? '注销吊销'
                : ''
      }).then((res) => {
        if (res.result && res.result.length > 0) {
          this.chartData = res.result
          this.initChart()
        }
      })
    },
    initChart() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      const chartData = []
      this.chartData.forEach((item) => {
        chartData.push({
          name: item.ztlb,
          value: item.hs
        })
      })
      const option = {
        color: this.colorList,
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '10%',
          right: '0%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        // backgroundColor: rgba(1, 61, 128, 1),
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['75%', '90%'],
            itemStyle: {
              borderColor: '#132e51',
              borderWidth: 2
            },
            label: {
              show: false
            },
            data: chartData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.top-row {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 49px;
  background: url("../images/l-row-bg.png") no-repeat;
  background-size: 100% 100%;

  .name {
    font-family: MicrosoftYaHeiUI;
    font-size: 16px;
    color: #ffffff;
  }
  .value-wrapper {
    display: flex;
    align-items: center;

    span:first-child {
      margin-right: 4px;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #ffde00;
      line-height: 1.5;
    }
    span:last-child {
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #ffffff;
    }
  }
  .rate {
    display: flex;
    align-items: center;
    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
    font-weight: bold;
    font-size: 16px;
    color: #ff3e3e;

    &::before {
      margin-right: 4px;
      display: block;
      width: 10px;
      height: 14px;
      background: url("../images/up-arrow.png") no-repeat;
      background-size: 100% 100%;
      content: "";
    }
    &.ratedown {
      color: #18c624;
      &::before {
        margin-right: 4px;
        display: block;
        width: 10px;
        height: 14px;
        background: url("../images/down-arrow.png") no-repeat;
        background-size: 100% 100%;
        content: "";
      }
    }
  }
}
.prechart {
  width: 100%;
  height: 170px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  .leftanimationicon {
    width: 142px;
    height: 142px;
    position: absolute;
    left: 9px;
    top: 14px;
    z-index: 1;
    background: url("../images/circleicon.png") no-repeat center;
    background-size: 100% 100%;
    animation: spin 2s linear infinite;
  }
  .leftmiddleicon {
    width: 43px;
    height: 44px;
    position: absolute;
    left: 58px;
    top: 64px;
    z-index: 99;
    background: url("../images/middleicon.png") no-repeat center;
    background-size: 100% 100%;
  }
  .leftchartarea {
    width: 142px;
    height: 142px;
    margin-right: 10px;
    position: relative;
  }
  .rightlegend {
    width: 260px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .legendlitem {
      width: 100%;
      height: 38px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      position: relative;

      .legendname {
        width: 80px;
        height: 28px;
        display: flex;
        align-items: center;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        .lefticon {
          width: 4px;
          height: 10px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
      .legendpercent {
        width: 180px;
        height: 28px;
        background: #1d4276;
        border-radius: 6px;
        font-family: "Microsoft YaHei";
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          width: 65%;
          text-align: center;
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-size: 18px;
          font-style: normal;
          text-transform: none;
          &:last-child {
            width: 35%;
          }
          &.percent {
            color: #ff3e3e;
            font-size: 18px;
            font-weight: bold;
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              width: 8px;
              height: 12px;
              background: url("../images/up-arrow.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          &.downpercent {
            color: #18c624;
            i {
              width: 8px;
              height: 12px;
              background: url("../images/down-arrow.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          b {
            font-weight: normal;
            color: #ffde00;
            font-size: 22px;
          }
        }
      }
    }
  }
}
/* 定义一个名为spin的动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
